<template>
    <sub-box>
        <breadcrumb :title="'通知列表'"></breadcrumb>
        <div class="noticelist-box white-block" v-loading="loading">
            <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" class="mt20">
                <template slot="noticeName" slot-scope="scope">
                    <el-link :underline="false" @click="$router.push($route.path+'/'+scope.row.noticeId)">
                        {{scope.row.noticeName}}
                    </el-link>
                </template>
                <template slot="noticeStartTime" slot-scope="scope">
                    <span>{{scope.row.noticeStartTime}}</span>
                </template>
            </table-example>
            <page :data="data" v-if="data" class="mt20 page" @jumpPage="getList"></page>
        </div>
        <transition name="slide">
            <router-view></router-view>
        </transition>
    </sub-box>
</template>

<script>
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'

    export default {
        data() {
            return {
                tableData: [],
                header: [
                    {
                        prop: 'noticeName',
                        label: '通知名称',
                        minWidth: '50%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'noticeStartTime',
                        label: '发布时间',
                        minWidth: '30%',
                        align: 'center',
                        headerAlign: 'center'
                    }
                ],
                slotColumns: ['noticeName', 'noticeStartTime'],
                data: null,
                loading: false,
                index: 1
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/gsNotice/getList', {
                    current: this.index || 1,
                    size: 10,
                    noticeStatus: 1
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.tableData = result.data.records
                        this.data = result.data
                    }
                    this.$method.updateView()
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            tableExample,
            page,
            subBox,
            breadcrumb
        }
    }
</script>
<style>
    .el-table thead {
        height: 0.4rem;
    }

    .el-table tr {
        height: 0.6rem;
    }
</style>

<style scoped lang="less">
    .notice-box {
        overflow: hidden;

        p {
            float: left;
            font-size: 0.2rem;
        }

        .btn {
            width: 0.8rem;
            height: 0.34rem;
            float: right;
        }
    }

    .noticelist-box {
        /*height: 8.8rem;*/
        /*background-color: #fff;*/
        /*padding: 0.9rem 0.3rem;*/
        /*position: relative;*/
        padding-top: .9rem;
        padding-bottom: .6rem;

        .page {
            /*position: absolute;*/
            margin-top: 0.7rem;
            right: 0.3rem;
            bottom: 1.14rem;
        }
    }
</style>
